<template>
  <fixtitletopVue>
	  <template #l>
	  	<view @click="back" class="iconfont icon-31fanhui1"></view>
	  </template>
  </fixtitletopVue>
<view class="con" v-if="phonenmber">
	<view class="tit">请输入验证码</view>
	<text class="titt" space="ensp">验证码已发送至    {{phonenmber.slice(0,3)}} {{phonenmber.slice(3,7)}} {{phonenmber.slice(7)}}</text>
	<view class="yzm">
           <xt-verify-code type="bottom" v-model="verifyCode" @confirm="confirm"></xt-verify-code>
	</view>
	<view class="cx" v-if="!iscx">{{time}}秒后可从新发送验证码</view>
	<view class="cx" v-else @click="sendynm">重新发送验证码</view>
</view>
</template>

<script setup>
	import {ref} from 'vue'
	import fixtitletopVue from '../../components/fixtitletop/fixtitletop.vue';
	import {onLoad,onReady} from '@dcloudio/uni-app'
	import {getpdphoneyzm,getsendphoneyzm} from '@/api/index.js'
	const verifyCode=ref()
	const phonenmber=ref()
	const iscx=ref(false)
	const time=ref(60)
	onLoad(e=>{
		phonenmber.value=e.phone
	})
	const back=()=>{
		uni.navigateBack()
	}
	onReady(()=>{
		djs()
	})
	const djs=()=>{
		const timer= setInterval(()=>{
			 time.value--
			 if(time.value==0){
				 clearInterval(timer)
				 iscx.value=!iscx.value
			 }
		 },1000)
	}
	const sendynm=async()=>{
		const rudata=await getsendphoneyzm(phonenmber.value)
		if(rudata.code==200){
			uni.showToast({
				title:"发送成功！",
				icon:"none"
			})
		}else if(rudata.code==1){
			 uni.showToast({
			 	title:"发送频繁！！！",
				icon:"none"
			 })
		}	
		iscx.value=!iscx.value
		time.value=60	
		djs()
	}
	const confirm=async(e)=>{
		const data={
			phone:phonenmber.value,
			code:e
		}
		const rudata=await getpdphoneyzm(data)
		 if(rudata.code==0){
			uni.showToast({
				title:rudata.data.msg,
				icon:"none"
			})
		}else{
			uni.navigateTo({
				url:`/pages/findsetmm/findsetmm?phone=${phonenmber.value}`
			})
		}

	}
</script>

<style lang="scss" scoped>
	.iconfont{
		font-size: 25rpx;
	}
	.con{
		padding: 0 50rpx;
		.titt{
			font-size: 24rpx;
			color: #7b7b7b;
			margin-top: 20rpx;
		}
	}
	.tit{
		margin-top: 60rpx;
		height: fit-content;
		width: 100%;
		text-align: start;
		font-size: 45rpx;
		font-weight: 700;
		line-height: 70rpx;
	}
	.yzm{
		margin-top: 70rpx;
		height: 200rpx;
		width: 100%;
	}
	.cx{
		font-size: 23rpx;color: #7b7b7b;
	}
</style>
